<template>
  <div>
    <div style="text-align: center">
      <div style="width: 50%;margin: 10px; padding-left: 20%">
        <el-form :inline="true" class="demo-form-inline" style="width: 100%">
          <el-form-item>
            <el-input  placeholder="兼职名称" style="width: 450px"  v-model="searchParams.title"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getJob">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="menu" v-for="item in classifyValue"><span  @click="toJob(item.id)">{{item.name}}</span></div>
    </div>
    <div>
      <div class="jobCard" v-for="item in jobValue">
        <i class="el-icon-star-off" style="float: right;font-size: 16px" v-if="item.useCollect===false" @click="collectChange(item.id,true)"></i>
        <i class="el-icon-star-on" style="float: right;color: red;font-size: 16px" v-if="item.useCollect===true" @click="collectChange(item.id,false)"></i>
        <img style="width: 100%; height:50%;max-height: 250px;min-width: 250px" :src="item.img">
        <h3>{{item.title}}<el-tag v-if="item.status==false" type="danger">已满</el-tag></h3>
        <p>{{item.content}}</p>
        <el-button type="primary" @click="toShowJob(item)">查看详情</el-button>
      </div>
    </div>
    <div align="center" style="margin-top: 15px">
      <el-pagination
        :page-size="this.searchParams.pageSize"
        :current-page="this.searchParams.pageNum"
        layout="prev, pager, next"
        :total="this.total"
        @current-change="handleCurrentChange"
        >
    </el-pagination></div>
    <el-dialog
      title="兼职详细信息"
      :visible.sync="showValue"
      width="40%"
      center>
      <div style="width: 40%;display: inline-block">
        <el-image style="width: 300px;height: 200px" :src="showJob.img"></el-image>
      </div>
      <div style="width: 58%;display: inline-block;float: right">
        <el-descriptions :title="showJob.title" :column="4">
          <el-descriptions-item label="联系方式" span="2">{{showJob.phone}}</el-descriptions-item>
          <el-descriptions-item label="价格" span="2">{{showJob.price}}</el-descriptions-item>
          <el-descriptions-item label="发布时间" span="4">{{showJob.createTime}}</el-descriptions-item>
          <el-descriptions-item label="开始时间" span="2">{{showJob.startTime}}</el-descriptions-item>
          <el-descriptions-item label="结束时间" span="2">{{showJob.endTime}}</el-descriptions-item>
          <el-descriptions-item label="描述" span="4">{{showJob.content}}</el-descriptions-item>
        </el-descriptions>
      </div>
  </el-dialog>
  </div>
</template>

<script>
import {jobSearch, jobSearchByUser} from "@/api/jobApi";
import {getAllClassify} from "@/api/classifyApi";
import router from "@/router";
import {addCollect, removeCollect} from "@/api/collectApi";

export default {
  name: "Job",
  data(){
    return{
      searchParams:{
        cid:1,
        pageNum:1,
        pageSize:4,
        token:"",
        title:""
      },
      classifyValue:[],
      jobValue:[],
      total:0,
      showJob:{},
      showValue:false
    }
  },
  methods:{
    getJob(){
      var token = window.localStorage.getItem("token");
      if (token!=null){
        //已经登录
        this.searchParams.token=token;
        jobSearchByUser(this.searchParams).then(res=>{
            if (res.code===200){
              this.total=res.data.total;
              this.jobValue=res.data.records;
            }
        })
      }else{
        //未登录
        jobSearch(this.searchParams).then(res=>{
          if (res.code===200){
            this.total=res.data.total;
            this.jobValue=res.data.records;
          }
        })
      }
    },
    toJob(cid){
      this.searchParams.cid=cid;
      this.getJob();
    },
    collectChange(jid,statue){
      let token = window.localStorage.getItem("token");
      if (token==null){
        this.$router.push("/login")
      }else{
        let collect={jid:jid,token:token};
          if (statue){
            //新增
            addCollect(collect).then(res=>{
              if (res.code===200){
                  this.getJob();
              }
            })
          }else{
            //删除
            removeCollect(collect).then(res=>{
              if (res.code===200){
                this.getJob();
              }
            })
          }
      }
    },
    toShowJob(job){
      var token = window.localStorage.getItem("token");
      if (token==null){
        this.$router.push("/login")
      }else{
        this.showJob=job;
        this.showValue=true;
      }
    },
    handleCurrentChange(val){
      this.searchParams.pageNum=val;
      this.getJob()
    }
  },
  mounted() {
    getAllClassify().then(res=>{
      if (res.code===200){
        this.classifyValue=res.data;
      }
    });
    this.getJob();
  }
}
</script>

<style scoped>
.menu{
  display: inline-block;
  width: auto;
  margin: 20px;
}
.jobCard{
  display: inline-block;
  border: #99a9bf solid 1px;
  border-radius: 3px;
  margin: 15px 2%;
  width: 19%;
  min-width: 250px;
  height: auto;
  padding: 10px;
  word-wrap:break-word;
}
</style>
